<template>
    <titleCompt title="分日留抵退税额增速">
      <div class="tscxbox">
        <echartCompt class="tscxbox-chart" v-model="chartOption" />
      </div>
    </titleCompt>
  </template>

<script>
    import titleCompt from "@/views/金四决策指挥平台/components/titleCompt";
    export default {
        components: {
            titleCompt,
        },
        data() {
            return {
                xData: [{
                    XH: 1
                }, {
                    XH: 2
                }, {
                    XH: 3
                }],
                yData: [{
                    TSJE_HB: 30301.12
                }, {
                    TSJE_HB: 37760250.73
                }, {
                    TSJE_HB: 221080586.51
                }],
            };
        },
        computed: {
            chartOption() {
                let _this = this;
                let option = {
                    grid: {
                        top: 40,
                        bottom: 10,
                        left: 80,
                        right: 0,
                    },
                    tooltip: {
                        show: true,
                        trigger: "axis",
                        backgroundColor: "transparent",
                        borderWidth: 0,
                        formatter: function(params, ticket, callback) {
                            //console.log(params);
                            try {
                                let str = `<div class="selfToolTips">
                      <span class="selfToolTips-value">
                      ${_this.digtalFormatUnit(
                        Number(params[0].value),
                        "%",
                        false
                      )} 
                      </span>
                  </div>`;
                                return str;
                            } catch (e) {
                                console.log(e);
                            }
                        },
                    },
                    xAxis: {
                        type: "category",
                        data: this.xData,
                        axisLabel: {
                            show: true,
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    yAxis: {
                        type: "value",
                        name: "%",
                        nameTextStyle: {
                            color: "#fff",
                            fontSize: 22,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            color: "#fff",
                            fontSize: 22,
                        },
                    },
                    series: [{
                        data: this.yData,

                        type: "line",
                        smooth: true,
                        areaStyle: {
                            opacity: 0.8,
                            color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "rgb(4, 25, 78)",
                            }, {
                                offset: 1,
                                color: "rgb(3, 47, 108)",
                            }, ]),
                        },
                    }, ],
                };
                return option;
            },
            sql() {
                //let sql = ``;
                //return sql;
            },
        },
        mounted() {
            //this.init();
        },
        methods: {
            init() {
                //this.getData();
            },
            //   getData() {
            //     this.rowData = [];
            //     this.ajax({
            //       sql: this.sql,
            //       sqlTip: "-",
            //     }).then((res) => {
            //       for (let i = 0; i < res.length; i++) {
            //         this.xData.push(res[i]["XH"]);
            //         this.yData.push(res[i]["TSJE_HB"]);
            //       }
            //     });
            //   },

        },
    };
</script>

<style lang="scss" scoped>
    .tscxbox {
        width: 100%;
        height: 100%;
        &-chart {
            height: 100%;
        }
    }
</style>